import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_elm/components/elmBottomNavigatorBar.dart';
import 'package:flutter_elm/store/item_model_data.dart';

import '../json/item_model.dart';
import '../network/user_api.dart';

class IndexPage extends StatefulWidget {
  const IndexPage({super.key, required this.title});
  final String title;

  @override
  State<IndexPage> createState() => _IndexPageState();
}

class _IndexPageState extends State<IndexPage> {
  UserApi userApi = UserApi();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        toolbarHeight: 40,
        backgroundColor: Colors.blueAccent.shade400,
        title: TitleContainer(title: widget.title,),
        // 取消左上角返回箭头
        automaticallyImplyLeading: false,
      ),
      bottomNavigationBar: ElmBottomNavigatorBar(),
      body: CustomScrollView(
        slivers: [
          SliverAppBar(
            title: SearchField(),
            backgroundColor: Colors.blueAccent.shade400,
            // pinned: true,//固定显示
            floating: true,//用户下拉时会自然消失视野，但是有上拉操作时，就会显现该区域
            // snap: true,//要和floating结合使用，但是我们 appBar区域较小，看不出差别
          ),
          SliverPadding(padding: EdgeInsets.only(bottom: 12)),
          SliverGrid(
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 5,
                mainAxisSpacing: 8
            ),
            delegate: SliverChildBuilderDelegate((context, index){
              return GestureDetector(
                onTap: (){toBusinessList(index+1);},
                child:  IndexGridViewItem(item: gridViewItemList[index],),
              );
            },
                childCount: gridViewItemList.length
            ),
          ),
          SliverPadding(padding: EdgeInsets.only(bottom: 10)),
          SliverToBoxAdapter(
            child: Container(
              margin: EdgeInsets.symmetric(horizontal: 10),
              child: Column(
                children: [
                  IndexBanner(),
                  Padding(padding: EdgeInsets.only(bottom: 6)),
                  VipBanner(),
                  Padding(padding: EdgeInsets.only(bottom: 20)),
                  HLineTextHLine(text: "推荐商家"),
                  Padding(padding: EdgeInsets.only(bottom: 10)),
                ],
              ),
            )
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate((context, index){
              return Container(
                margin: EdgeInsets.symmetric(horizontal: 10),
                child: IndexListViewItem(item: indexListItemList[index]),
              );
            },
              //这个数量要指定，否则报错
              childCount: indexListItemList.length,
            ),
          ),
        ],
      ),
    );
  }
  
  
  toBusinessList(orderTypeId){
    Navigator.pushNamed(context, "business_list",arguments: orderTypeId);
  }
}











































class TitleContainer extends StatelessWidget {
  const TitleContainer({super.key, required this.title});
  final String title;
  @override
  Widget build(BuildContext context) {
    return Container(
      //给组件增加负边距  分别对应xyz方向上的边距
      transform: Matrix4.translationValues(-10, 0, 0.0),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          Container(child: IconButton(
              color: Colors.white,
              splashColor: Colors.transparent,
              highlightColor: Colors.transparent,
              onPressed: (){}, icon: Icon(Icons.location_on_outlined)),),
          Container(transform: Matrix4.translationValues(-10, 0, 0.0),child:Text("${title}",style: TextStyle(color: Colors.white),),),
          Container(transform: Matrix4.translationValues(-20, 0, 0.0),
            child: IconButton(
              color: Colors.white,
              splashColor: Colors.transparent,
              highlightColor: Colors.transparent,
              onPressed: (){},
              iconSize: 35,
              icon: Icon(Icons.arrow_drop_down),
            ),
          )
        ],
      ),
    );

  }
}









class HLineTextHLine extends StatelessWidget {
  const HLineTextHLine({super.key, required this.text});
  final String text;
  @override
  Widget build(BuildContext context) {
    return Container(
      // margin: EdgeInsets(),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Container(
            height: 1,
            width: 30,
            decoration: BoxDecoration(
                border: Border.all(width: 1,color: Colors.grey)
            ),
          ),
          Padding(padding: EdgeInsets.only(left: 10)),
          Text(text),
          Padding(padding: EdgeInsets.only(left: 10)),
          Container(
            height: 1,
            width: 30,
            decoration: BoxDecoration(
                border: Border.all(width: 1,color: Colors.grey)
            ),
          ),
        ],
      ),
    );
  }
}













class VipBanner extends StatelessWidget {
  const VipBanner({super.key});
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 20,vertical: 10),
      height: 40,
      decoration: BoxDecoration(
        color: Color(int.parse("feedc1",radix:16)).withAlpha(255),
        borderRadius: BorderRadius.circular(4),
      ),
      child:  Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Container(
            decoration: BoxDecoration(
            ),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.end,
              children: [
                Image.asset("assets/images/super_member.png"),
                Padding(padding: EdgeInsets.only(right:10)),
                Text("超级会员", style: TextStyle(fontWeight: FontWeight.bold,color: Colors.grey.shade700),),
                Padding(padding: EdgeInsets.only(right:10)),
                Text("每月享超值权益", style: TextStyle(fontWeight: FontWeight.normal,color: Colors.grey.shade700,fontSize: 12)),
              ],
            ),

          ),
          Container(
            decoration: BoxDecoration(
            ),
            child: Row(
              children: [
                Text("立即开通", style: TextStyle(fontWeight: FontWeight.normal,color: Colors.grey.shade700),),
                Container(margin:EdgeInsets.only(top: 1.9),child: Icon(Icons.arrow_forward_ios,size: 12,color: Colors.grey.shade700),)
              ],
            ),
          )
        ],
      ),
    );
  }
}




class SearchField extends StatelessWidget {
  const SearchField({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
        margin: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
        decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(4)
        ),
        child: Container(
            margin: EdgeInsets.symmetric(horizontal: 60, ),
            child: Row(
              children: [
                Container(child: Icon(Icons.search,color: Colors.grey,),),
                Expanded(
                  child: TextField(
                    //设置输入字体的样式。
                    style: TextStyle(fontSize: 12),
                  decoration: InputDecoration(
                      hintText: "搜索饿了么商家、商品名称",
                      hintStyle: TextStyle(color: Colors.grey),
                      border: InputBorder.none,
                    //高度包裹，输入框一定会包住字体。
                    isCollapsed: true,
                    //内容内边距，印象输入框高度。
                    contentPadding: EdgeInsets.symmetric(vertical: 7)
                  ),
                ),)
              ],
            )
        )
    );
  }
}













class IndexBanner extends StatelessWidget {
  const IndexBanner({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
        height: 100,
        decoration: BoxDecoration(
          //为图片设置圆角
          //圆角半径
            borderRadius: const BorderRadius.all(Radius.circular(4.0)),
            //边框线宽、颜色
            border: Border.all(width: 1.0, color: Colors.grey.shade300),
            image: DecorationImage(
                image: AssetImage("assets/images/index_banner.png"),
                fit: BoxFit.fill
            )
        ),
        child: Container(
          alignment: Alignment.topLeft,
          padding: EdgeInsets.only(left:15, top:8),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text("品质套餐",style: TextStyle(fontWeight: FontWeight.bold,fontSize: 18, color: Colors.grey.shade800),),
              Padding(padding: EdgeInsets.only(bottom: 4)),
              Text("搭配齐全吃得好",style: TextStyle(fontWeight: FontWeight.normal,fontSize: 12, color: Colors.grey.shade800),),
              Padding(padding: EdgeInsets.only(bottom: 10)),
              Container(
                child: Row(
                  children: [
                    Text("立即抢购",
                      style: TextStyle(fontWeight: FontWeight.bold,fontSize: 14, color: Colors.amber.shade700),
                    ),
                    Container(margin:EdgeInsets.only(top: 1.9),child: Icon(Icons.arrow_forward_ios,size: 12,color: Colors.amber.shade700),)
                  ],
                ),
              ),
            ],
          ),
        )
    );
  }
}






















class IndexGridViewItem extends StatelessWidget {
  const IndexGridViewItem({super.key, required this.item});
  final ViewItemModel<String> item;

  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      margin: EdgeInsets.only(bottom: 10),
      child: Column(
        children: <Widget>[
          Expanded(child: Image.asset(item.data,width: 45,)),
          Text(
            this.item.title,
            style: TextStyle(
              fontSize: 11,
              color: Color(0xFF333333),
            ),
          ),
        ],
      ),
    );
  }
}





















class IndexListViewItem extends StatelessWidget {
  const IndexListViewItem({super.key, required this.item});

  final ListItemModel item;

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.symmetric(vertical: 12),
      decoration: BoxDecoration(
        // color: Colors.grey
        border: Border(bottom: BorderSide(width: 1.0, color: Colors.grey.shade300)),
      ),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Image.asset(item.imgPath,scale: 1.8,),
          Padding(padding: EdgeInsets.only(right:10)),
          Expanded(
            child: Container(
              transform: Matrix4.translationValues(0, -3, 0.0),
              child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                Text(item.title,style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18),),
                Padding(padding: EdgeInsets.only(bottom: 5)),
                Row(
                  children: [
                    Row(children: [Icon(Icons.star,color: Colors.amber, size: 20,),Icon(Icons.star,color: Colors.amber, size: 20,),Icon(Icons.star,color: Colors.amber, size: 20,),Icon(Icons.star,color: Colors.amber, size: 20,),Icon(Icons.star,color: Colors.amber, size: 20,)],),
                    Padding(padding: EdgeInsets.only(right: 5)),
                    Text("${item.score}"),
                    Padding(padding: EdgeInsets.only(right: 8)),
                    Text("月售${item.monthCount}单"),
                  ],
                ),
                Padding(padding: EdgeInsets.only(bottom: 5)),
                Container(
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text("￥${item.startPrice}起送 | ￥${item.deliveryPrice}配送",style: TextStyle(fontSize: 12),),
                      Text("${item.distance}km | ${item.costTime}分钟",style: TextStyle(fontSize: 12),),
                    ],
                  ),
                ),
                Padding(padding: EdgeInsets.only(bottom:10)),
                Container(
                  padding: EdgeInsets.only(right: 5,left:5, bottom: 4),
                  decoration: BoxDecoration(
                    borderRadius: const BorderRadius.all(Radius.circular(4.0)),
                    border: Border.all(width: 1.0, color: Colors.grey.shade300),
                  ),
                  child: Text(item.desc),
                ),
                Padding(padding: EdgeInsets.only(bottom:10)),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  // crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    HighlightText(color: Colors.green, text: "新",desc: "饿了么新用户首单立减9元",),
                    Text("2个活动",style: TextStyle(fontSize: 12,color: Colors.grey),)
                  ],
                ),
                Padding(padding: EdgeInsets.only(bottom:5)),
                HighlightText(color: Colors.orange, text: "特",desc: "特价商品5元起",),
              ],
            ),
          ))
        ],
      )
    );
  }
}











class HighlightText extends StatelessWidget{
  const HighlightText({super.key, required this.color, required this.text, required this.desc});
  final Color color;
  final String text;
  final String desc;

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Container(
            // padding: EdgeInsets.only(right: 3,left:3,bottom: 4 ),
            padding: EdgeInsets.only(right: 1,left:1,top: 0),
            decoration: BoxDecoration(
                borderRadius: const BorderRadius.all(Radius.circular(4.0)),
                color: color
            ),
            child: Text(text,style: TextStyle(color: Colors.white,fontSize: 12),),
          ),
          Padding(padding: EdgeInsets.only(right:5)),
          Container(
            // padding: EdgeInsets.only(bottom: 4),
            child: Text(desc,style: TextStyle(fontSize: 12),),
          )
        ],
      ),
    );
  }
}
